@import "./color.scss";

// color
$white: $white;

// basic
$primaryColor: $blue;
$primaryPlainColor: rgb(217, 236, 255);
$successColor: $green;
$successPlainColor: rgb(225, 243, 216);
$warningColor: $orange;
$warningPlainColor: rgb(250, 236, 216);
$dangerColor: $red;
$dangerPlainColor: rgb(253, 226, 226);
$infoColor: #303133;
$infoMediumColor: #909399;
$infoMediumLightColor: rgb(200, 200, 205);
$infoLightColor: rgb(233, 233, 235);
$infoPlainColor: rgb(244, 244, 245);
$infoBorderColor: #e6e6e6;
$disabledBgColor: #F5F7FA;
$disabledBorderColor: #E4E7ED;
$disabledColor: #C0C4CC;

// transition
$defaultTransitionDuration: 300ms;

// header
$headerHeight: 64px;
$headerBg: #ffffff;
$headerBorderColor: #eaecef;

// tabs view
$tabsViewHeight: 48px;
$tabsViewTabMaxWidth: 180px;
$tabsViewTabHeight: 20px;
$tabsViewTabColor: #263445;
$tabsViewTabBorderColor: $infoLightColor;
$tabsViewBorderColor: $headerBorderColor;
$tabsViewActiveTabColor: $primaryColor;
$tabsViewActiveTabPlainColor: $primaryPlainColor;
$tabsViewBg: $infoPlainColor;
$tabsViewTabBg: #ffffff;

//sidebar
$menuText: #bfcbd9;
$menuActiveText: $primaryColor;
$subMenuActiveText: #f4f4f5; //https://github.com/ElemeFE/element/issues/12951
$menuBg: #304156;
$menuHover: #263445;
$subMenuBg: #1f2d3d;
$subMenuHover: #001528;
$sidebarWidth: 240px;
$sidebarWidthCollapsed: 64px;
$sidebarCollapseTransitionDuration: $defaultTransitionDuration;

// container
$containerBg: $infoPlainColor;
$containerWhiteBg: $white;
$containerBorderColor: $infoLightColor;

// nav-sidebar
$navSidebarColor: $infoColor;
$navSidebarBorderColor: $infoLightColor;
$navSidebarBg: #ffffff;
$navSidebarWidth: 240px;
$navSidebarItemHeight: 48px;
$navSidebarItemBorderColor: $navSidebarBorderColor;
$navSidebarItemActionColor: $infoColor;
$navSidebarSearchHeight: 40px;
$navSidebarCollapseTransitionDuration: $defaultTransitionDuration;

// nav-tabs
$navTabsHeight: 40px;

// nav-actions
$navActionsDefaultHeight: 40px;
$navActionsCollapseTransitionDuration: $defaultTransitionDuration;
$navActionsGroupBorderColor: $infoBorderColor;
$navActionsItemColor: $infoMediumColor;

// file-editor
$fileEditorMaskBg: rgba(255, 255, 255, 0.05);
$fileEditorNavMenuTopBarHeight: 28px;
$fileEditorNavMenuWidth: 240px;
$fileEditorNavMenuBorderColor: $infoBorderColor;
$fileEditorNavMenuItemSelectedBg: $primaryPlainColor;
$fileEditorNavMenuItemSelectedColor: $primaryColor;
$fileEditorNavMenuCollapseTransitionDuration: $defaultTransitionDuration;
$fileEditorNavMenuItemDragTargetBorderColor: $primaryColor;
$fileEditorNavTabsHeight: $fileEditorNavMenuTopBarHeight;
$fileEditorNavTabsBg: $menuBg;
$fileEditorNavTabsItemColor: $white;
$fileEditorNavTabsItemActiveBg: $primaryPlainColor;
$fileEditorNavTabsItemActiveColor: $primaryColor;
$fileEditorNavTabsItemMaxWidth: 240px;
$fileEditorSettingsDialogLabelWidth: 240px;

// context-menu
$contextMenuItemHeight: 36px;
$contextMenuItemMaxWidth: 480px;

// the :export directive is the magic sauce for webpack
:export {
  white: $white;
  primaryColor: $primaryColor;
  primaryPlainColor: $primaryPlainColor;
  successColor: $successColor;
  successPlainColor: $successPlainColor;
  warningColor: $warningColor;
  warningPlainColor: $warningPlainColor;
  dangerColor: $dangerColor;
  dangerPlainColor: $dangerPlainColor;
  infoColor: $infoColor;
  infoMediumColor: $infoMediumColor;
  infoMediumLightColor: $infoMediumLightColor;
  infoLightColor: $infoLightColor;
  infoPlainColor: $infoPlainColor;
  infoBorderColor: $infoBorderColor;
  defaultTransitionDuration: $defaultTransitionDuration;
  headerHeight: $headerHeight;
  headerBg: $headerBg;
  headerBorderColor: $headerBorderColor;
  tabsViewHeight: $tabsViewHeight;
  tabsViewTabMaxWidth: $tabsViewTabMaxWidth;
  tabsViewTabHeight: $tabsViewTabHeight;
  tabsViewTabColor: $tabsViewTabColor;
  tabsViewTabBorderColor: $tabsViewTabBorderColor;
  tabsViewBorderColor: $tabsViewBorderColor;
  tabsViewActiveTabColor: $tabsViewActiveTabColor;
  tabsViewBg: $tabsViewBg;
  menuText: $menuText;
  menuActiveText: $menuActiveText;
  subMenuActiveText: $subMenuActiveText;
  menuBg: $menuBg;
  menuHover: $menuHover;
  subMenuBg: $subMenuBg;
  subMenuHover: $subMenuHover;
  sidebarWidth: $sidebarWidth;
  sidebarWidthCollapsed: $sidebarWidthCollapsed;
  sidebarCollapseTransitionDuration: $sidebarCollapseTransitionDuration;
  containerBg: $containerBg;
  navSidebarColor: $navSidebarColor;
  navSidebarBorderColor: $navSidebarBorderColor;
  navSidebarBg: $navSidebarBg;
  navSidebarItemHeight: $navSidebarItemHeight;
  navSidebarWidth: $navSidebarWidth;
  navSidebarItemBorderColor: $navSidebarItemBorderColor;
  navSidebarItemActionColor: $navSidebarItemActionColor;
  navSidebarSearchHeight: $navSidebarSearchHeight;
  navSidebarCollapseTransitionDuration: $navSidebarCollapseTransitionDuration;
  navTabsHeight: $navTabsHeight;
  navActionsDefaultHeight: $navActionsDefaultHeight;
  navActionsCollapseTransitionDuration: $navActionsCollapseTransitionDuration;
  navActionsGroupBorderColor: $navActionsGroupBorderColor;
  navActionsItemColor: $navActionsItemColor;
  fileEditorMaskBg: $fileEditorMaskBg;
  fileEditorNavMenuWidth: $fileEditorNavMenuWidth;
  fileEditorNavMenuBorderColor: $fileEditorNavMenuBorderColor;
  fileEditorNavMenuItemSelectedBg: $fileEditorNavMenuItemSelectedBg;
  fileEditorNavMenuCollapseTransitionDuration: $fileEditorNavMenuCollapseTransitionDuration;
  fileEditorNavMenuItemDragTargetBorderColor: $fileEditorNavMenuItemDragTargetBorderColor;
  fileEditorNavTabsHeight: $fileEditorNavTabsHeight;
  fileEditorNavTabsBg: $fileEditorNavTabsBg;
  fileEditorNavTabsItemColor: $fileEditorNavTabsItemColor;
  fileEditorNavTabsItemActiveBg: $fileEditorNavTabsItemActiveBg;
  fileEditorNavTabsItemActiveColor: $fileEditorNavTabsItemActiveColor;
  fileEditorNavTabsItemMaxWidth: $fileEditorNavTabsItemMaxWidth;
  fileEditorSettingsDialogLabelWidth: $fileEditorSettingsDialogLabelWidth;
  contextMenuItemHeight: $contextMenuItemHeight;
  contextMenuItemMaxWidth: $contextMenuItemMaxWidth;
}
